&:backdrop { color: $backdrop_text_color; }
}
+ &:drop(active) {
+ box-shadow: none;
+
+ &.light overlay {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
+ inset 0 0 0 1px $drop_target_color;
+ }
+
+ &.dark overlay {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
+ inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
overlay {
box-shadow: $_colorswatch_overlay_shadow;
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
border-color: #1c1f1f; }
colorswatch.light overlay:backdrop {
color: #d5d5d5; }
+colorswatch:drop(active) {
+ box-shadow: none; }
+ colorswatch:drop(active).light overlay {
+ border-color: #4e9a06;
+ box-shadow: inset 0 0 0 2px #1c1f1f, inset 0 0 0 1px #4e9a06; }
+ colorswatch:drop(active).dark overlay {
+ border-color: #4e9a06;
+ box-shadow: inset 0 0 0 2px #1c1f1f, inset 0 0 0 1px #4e9a06; }
colorswatch overlay {
box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5);
border: 1px solid #1c1f1f; }
border-color: rgba(0, 0, 0, 0.5); }
colorswatch.light overlay:backdrop {
color: #323232; }
+colorswatch:drop(active) {
+ box-shadow: none; }
+ colorswatch:drop(active).light overlay {
+ border-color: #4e9a06;
+ box-shadow: inset 0 0 0 2px #3d7805, inset 0 0 0 1px #4e9a06; }
+ colorswatch:drop(active).dark overlay {
+ border-color: #4e9a06;
+ box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #4e9a06; }
colorswatch overlay {
box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.3); }